.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #fff;
}

/* Maak de achtergrond en tekst van de knop wit */
.btn.btn-link {
    border: none;            /* Geen rand */
    color: white;            /* Tekstkleur */
}

/* achtergrond button */
.btn-outline-primary {
    color: #fff !important;
    border-color: #fc9533 !important;
    background-color: #fc9533 !important;
}

#loginPlatformChoice .btn {
    background-color: #FC9533 !important; /* Groene achtergrond */
    color: #fff !important; /* Witte tekst */
    border: 2px solid #FC9533 !important; /* Oranje rand */
}

#loginPlatformChoice #loginWithPlatformButton {
    background-color: #35bc6f !important; /* Groene achtergrond */
    color: #fff; /* Witte tekst */
    border: 2px solid #35bc6f !important; /* Groene rand */
}



.platform-logo {
    content: url('https://bytomorrow.nl/wp-content/uploads/2024/12/kwpn-1.png');
}


.jw-icon-cast {
    display: flex !important; /* Zorg ervoor dat het zichtbaar is */
    cursor: pointer; /* Zet de cursor op pointer */
    color: #FF5000;
}

google-cast-launcher {
    display: flex !important; /* Zorg ervoor dat het element zichtbaar is */
}

.jw-icon-cast svg,
.jw-icon-cast {
  filter: brightness(0) invert(1); /* maakt iconen wit */
  color: #FF5000; /* als er tekst of symbolen zijn die kleur gebruiken */
  fill: #FF5000; /* voor SVG's */
}

.cast_caf_status_d, .cast_caf_state_h {
    fill: #fff; /* Vul wit */
    stroke: #fff; /* Randen wit, indien nodig */
}

/* Oranje achtergrondkleur voor de knop */
.btn.btn-primary {
    background-color: #FC9533; /* Achtergrondkleur */
    border-color: #FC9533;     /* Randkleur */
    color: white;             /* Tekstkleur */
}

/* Icoon (play) ook wit maken */
.btn.btn-primary i.fa-play {
    color: white; /* Kleur van het play-icoon */
}

/* Hover-effect: donkerder oranje */
.btn.btn-primary:hover {
    background-color: #fff; /* Donkeroranje */
    border-color: #fff;
    color: #FC9533;
    text-decoration: none; /* Geen onderstreping */
}


/* Maak de achtergrond en het icoon van de navbar-toggler wit */
.navbar-toggler {
    background-color: none; /* Achtergrondkleur van de knop */
    border: none;            /* Geen rand */
}

/* De standaard Bootstrap navbar-toggler-icon wit maken */
.navbar-toggler-icon {
    background-image: none; /* Verwijder standaard icoon */
    display: inline-block;
    width: 30px; /* Breedte van het icoon */
    height: 3px; /* Dikte van de streepjes */
    background-color: #FC9533; /* Kleur van de streepjes */
    box-shadow: 0 6px 0 #FC9533, 0 12px 0 #FC9533; /* Voeg twee extra lijnen toe */
}

.btn.btn-primary:hover i.fa-play {
    color: #FC9533; /* Kleur van het play-icoon bij hover */
}


/* SVG pad (het icoon) wit maken */
.btn.btn-link svg path {
    fill: white; /* Vul de kleur van het pictogram */
}

.metoorsprong .asset-description {
    visibility: visible !important; /* Zorgt ervoor dat deze stijl prioriteit heeft */
}

/* Optioneel: Bij hover of focus een andere stijl toevoegen */
.btn.btn-link:hover, 
.btn.btn-link:focus {
    background-color: #FC9533; /* Lichtgrijze achtergrond bij hover */
    text-decoration: none; /* Verwijder onderstreping */
}


.intro-visual-bg-overlay:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 25%, #002663 100%);
    z-index: 0;
}


@media (max-width: 768px) {
    .video-background {
        background-size: cover;
        background-position: center;
        height: 80vh;
        padding: 0;
        max-height: 350px;
    }
}



h1 {
    color: #FC9533;
}

/* Specifiek voor het logo in de footer */
footer .img-fluid {
    content: url('https://www.kwpn.nl/Files/Templates/Designs/Kwpn/Images/kwpn-footer-logo.svg'); /* Nieuw logo */
    width: 70px; /* Breedte aanpassen naar wens */
    height: auto; /* Verhoudingen behouden */
}

/* Specifiek voor het logo in de footer */
footer .img-fluid {
    content: url('https://www.kwpn.nl/Files/Templates/Designs/Kwpn/Images/kwpn-footer-logo.svg'); /* Nieuw logo */
    width: 70px; /* Breedte aanpassen naar wens */
    height: auto; /* Verhoudingen behouden */
}

footer p {
    color: #002663 !important;
}


.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.navbar-nav .nav-item a {
    text-decoration: none; /* Geen onderstreping standaard */
    transition: text-decoration 0.2s ease; /* Optioneel: zorgt voor een vloeiende overgang */
}

.navbar-nav .nav-item a:hover {
    text-decoration: underline; /* Onderstreping bij hover */
    color: #FC9533 !important;
}


/* Voor ads geen titel */
.no-white-bg .card, 
.no-white-bg .bg-white {
    background: none !important;
    border: none;
    box-shadow: none !important;
}
.no-white-bg .text-muted {
    color: transparent !important; /* Alleen tekst onzichtbaar */
}
.no-white-bg .shadow-sm {
    box-shadow: none !important;
}
.advertisements .img-fluid {
    border-radius: 6px;
    pointer-events: auto; /* Zorgt ervoor dat klikbaarheid behouden blijft */
}

/* Basis styling voor de header */
.header_content {
    height: 140px;
   /* padding: 15px;*/
    background-color: #fff;
    color: #FC9533;
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 28px;
    box-sizing: border-box;
}

.text-muted{
    color: #FC9533 !important;
}

/* Logo styling */
.logo {
    position: relative;
    display: block;
}

/* Responsieve container breedtes */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Media queries voor verschillende schermgroottes */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }

    .col-lg-8 {
        width: 66.66666667%;
    }

    .col-lg-4 {
        width: 33.33333333%;
    }
}

/* Standaard reset voor box-sizing */
*, ::after, ::before {
    box-sizing: border-box;
}

/* Navbar styling */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.navbar-nav:first-child {
    background: #ffffff00;
}

.navbar .main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar .main-nav li {
    margin-right: 20px;
}

.navbar .main-nav li a {
    text-decoration: none;
    color: #FC9533;
    font-weight: 400;
}

.navbar .main-nav li a:hover {
    color: #FC9533;
}

/* Verbergen op kleinere schermen */
.hidden-xs, .hidden-sm {
    display: none !important;
}

@media (min-width: 768px) {
    .hidden-xs, .hidden-sm {
        display: block !important;
    }
}

/* Grote menu styling */
.bigMenu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}

.menuItem:hover .bigMenu {
    display: block;
}

.text-light {
    color: #FC9533 !important;
}

.card {
    color: #FC9533 !important;
}

.bg-dark {
    background-color: #000 !important;
}

.glide div[data-glide-el="controls"] .slider-btn {
    font-size: 20px;
    padding: 15px;
    background-color: rgba(0,0,0,.7);
}
.glide div[data-glide-el="controls"] .slider-btn-next {
  border-radius: 10px 0 0 10px;
}
.glide div[data-glide-el="controls"] .slider-btn-prev {
  border-radius: 0 10px 10px 0;
}
.no-image-title .card-header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
}

.modal h1,
.modal .fw-bold,
.modal #video_description,
.modal .Gf .asset-title,
.modal .Gf .asset-description {
  color: inherit !important;
}

.asset-description {
    white-space: normal;
    overflow: visible;
    z-index: 10;
    position: relative;
    height: auto;
    color: #fff;
}

.navbar-nav li.nav-item a {
    background-color: #002663 !important;
}

.navbar-nav .dropdown-menu {
    position: static;
    background-color: #002663;
}